<template>
	<view class="page">
		<view class="header_box" :style="{backgroundImage:`url(${hederBg})`}">
			<view class="header_nav m_b_14">
				<view class="" style="height: 88rpx;">

				</view>
				<view class="flex" :style="{height:statusBarHeight - 96 + 'rpx',justifyContent: 'center'}">
					<text class="f_30_0_b u-line-1" :style="{color: '#ffffff'}">
						我的
					</text>
				</view>
			</view>
			<view class="header_user flex_both m_b_44">
				<view class="flex header_user_left">
					<view class="m_r_16">
						<up-image :show-loading="true"
							:src="userInfo.avatar?userInfo.avatar:'/static/images/my/login_bg.png'" width="88rpx"
							height="88rpx" shape="circle"></up-image>
					</view>
					<view class="">
						<view class="flex ">
							<view class="m_r_12">
								<text class="f_30_f_b">
									{{userInfo.nickname}}
								</text>
							</view>
							<view class="header_user_left_type m_r_12">
								<text class="f_22_f m_b_4" style="color: #F6DFBD;">
									{{roleInfo.role == 1?'集团用户':'普通用户'}}
								</text>
							</view>
							<view class="flex" @click="onSwitchRole" v-if="userInfo.is_jituan_user">
								<text class="f_22_f m_b_4">
									{{'切换身份'}}
								</text>
							</view>
						</view>
						<view class="">
							<text class="f_22_f">
								ID：{{userInfo.id}}
							</text>
						</view>
					</view>
				</view>
				<view class="header_user_right">
					<text class="f_24_f m_b_4" @click="toInfo">
						个人资料 >
					</text>
				</view>
			</view>
			<view class="header_cs">
				<view class="flex_both" style="height: 56rpx;background: #000000;padding:0 20rpx;">
					<view class="m_b_6">
						<view class="">
							<view class="">

							</view>
							<view class="">
								<text class="f_24_0" style="color: #F6DFBD;">
									我的洗车卡
								</text>
							</view>
						</view>
					</view>
					<view class="m_b_6" @click="toRechargeLog">
						<text class="f_24_0" style="color: #F6DFBD;">
							充值记录 >
						</text>
					</view>
				</view>
				<view class="flex" style="justify-content: center;height: 138rpx;" v-if="!userInfo.car_num"
					@click="toBuy">
					<text class="f_24_0 m_b_6 m_r_24">
						您已没有次数
					</text>
					<text class="f_24_0 m_b_6" style="color: #F13A16;">立即抢购</text>
				</view>
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;height: 128rpx;padding-top: 10rpx ;background: rgba(0, 0, 0, 0.6);"
					v-else>
					<view class="">
						<text class="f_24_0 m_b_6"
							style="color: #F6DFBD;">欢迎您，{{roleInfo.role == 1?'集团用户':'普通用户'}}</text>
					</view>
					<view class="flex m_t_6">
						<text class="f_24_f m_r_8">您剩余的洗车次数 </text>
						<text class="f_28_0_b m_r_8"
							style="color:#FFD700;display: inline-block;">{{roleInfo.role?userInfo.car_jituan_num:userInfo.car_normal_num}}</text>
						<text class="f_24_f">
							次
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style="{minHeight:contentHeight}">
			<view class="main">
				<view class="main_list">
					<view class="" v-for="(item,index) in menuList" :key="index">
						<view class="main_item  flex_both m_b_22" @click="onClickMenuItem(item)" v-if="item.isShow">
							<view class="flex">
								<view :class="['m_r_12',item.icon.margin]" style="width: 38rpx;">
									<up-image :show-loading="true" :src="item.icon.url" :width="item.icon.width"
										:height="item.icon.height"></up-image>
								</view>
								<view class="">
									<text class="f_26_0_b">
										{{item.label}}
									</text>
								</view>
							</view>
							<view class="">
								<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="17rpx"
									height="34rpx"></up-image>
							</view>
						</view>

					</view>
					<view class="">
						<up-button open-type="contact">
							<view class="flex_both" style="width: 100%;">
								<view class="flex">
									<view :class="['m_r_12','m_t_4']" style="width: 38rpx;">
										<up-image :show-loading="true" src="/static/images/my/index_menu7.png"
											width="34rpx" height="34rpx"></up-image>
									</view>
									<view class="">
										<text class="f_26_0_b">
											联系客服
										</text>
									</view>
								</view>
								<view class="">
									<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="17rpx"
										height="34rpx"></up-image>
								</view>
							</view>
						</up-button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<Tabbar :activeTab="3"></Tabbar>
	<up-modal :show="switchShow" title="身份切换" :content='switchContent' :show-cancel-button="true" confirm-text="是"
		confirmColor="#F76D11" cancelText="否" @confirm="onSwitchConfirm" @cancel="switchShow = false"></up-modal>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import Tabbar from "@/components/user/tabbar.vue"
	import { roleInfoStore } from "@/stores/user.js"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const token = ref()
	const roleInfo = roleInfoStore()
	const hederBg = ref(proxy.$config.baseUrl + '/index_bg.png')
	const goto = (url) => {
		proxy.$gloab.gotoPage(url)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - 500rpx - 80rpx - env(safe-area-inset-bottom) - 100rpx)`
			}
		});
		token.value = uni.getStorageSync('token');
	})
	onShow(() => {
		if (!token.value) {
			proxy.$gloab.gotoPage('/pages/login/index')
			return
		}
		getUserInfo()
	})
	// 个人信息
	const userInfo = ref({
		avatar: ''
	})
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		userInfo.value = data
		roleInfo.is_normal_user = data.is_normal_user
		roleInfo.is_jituan_user = data.is_jituan_user
		roleInfo.car_normal_type_list = data.car_normal_type_list
		roleInfo.car_jituan_type_list = data.car_jituan_type_list
		console.log(roleInfo.car_jituan_type_list);
		// 0普通用户 1集团用户
		initMenuList()
	}
	const menuList = ref()
	const initMenuList = () => {
		menuList.value = [
			{
				label: '我的洗车卡',
				icon: {
					url: '/static/images/my/index_menu1.png',
					width: '34rpx',
					height: '26rpx',
					margin: 'm_b_12'
				},
				url: '/pages/my/washCard',
				isShow: true
			},
			{
				label: '我的子账号',
				icon: {
					url: '/static/images/my/index_menu2.png',
					width: '38rpx',
					height: '28rpx',
					margin: 'm_b_8'
				},
				url: '/pages/my/mySubAccount',
				isShow: false
			},
			{
				label: '我的订单',
				icon: {
					url: '/static/images/my/index_menu3.png',
					width: '30rpx',
					height: '30rpx',
					margin: 'm_b_6'
				},
				url: '/pages/order/index',
				isShow: true
			},
			{
				label: '营销管理',
				icon: {
					url: '/static/images/my/index_menu4.png',
					width: '28rpx',
					height: '30rpx',
					margin: 'm_b_4'
				},
				url: '/pages/my/MarketingManage',
				isShow: false
			},
			{
				label: '店铺管理',
				icon: {
					url: '/static/images/my/index_menu5.png',
					width: '34rpx',
					height: '30rpx',
					margin: 'm_b_4'
				},
				url: '/pages/my/myStoreDetail',
				isShow: false
			},
			{
				label: '我的邀请码',
				icon: {
					url: '/static/images/my/index_menu6.png',
					width: '34rpx',
					height: '26rpx',
					margin: 'm_b_12'
				},
				url: 'code',
				isShow: true
			},

		]
		// 处理部分特殊情况
		// menuList.value[1].isShow = true
		if (userInfo.value.parent_id == 0) {
			menuList.value[1].isShow = true
		}
		// menuList.value[3].isShow = true
		if (userInfo.value.is_marketing) {
			menuList.value[3].isShow = true
		}
		if (userInfo.value.is_shop) {
			menuList.value[4].isShow = true
		}

	}
	const onClickMenuItem = async (e) => {
		if (e.url == '/pages/my/myStoreDetail') {
			goto(e.url + `?id=${userInfo.value.shop_id}`)
			return
		}
		if (e.url == 'code') {
			let res = await proxy.$http('my.getUserInfo')
			let data = res.data
			if (data.is_marketing) {
				goto('/pages/my/marketingCode')
			} else {
				goto('/pages/my/myCode')
			}
			return
		}
		goto(e.url)
	}
	const toInfo = () => {
		goto('/pages/my/myInfo')
	}
	const toRechargeLog = () => {
		goto('/pages/my/rechargeLog')
	}
	const toBuy = () => {
		goto('/pages/index/recharge')
	}

	// 身份切换
	const onSwitchRole = () => {
		if (roleInfo.role) {
			switchContent.value = "即将切换到普通用户身份，是否继续？"
		} else {
			switchContent.value = "即将切换到集团用户身份，是否继续？"
		}
		switchShow.value = true
	}

	const switchShow = ref(false)
	const switchContent = ref('')
	const onSwitchConfirm = () => {
		if (roleInfo.role) {
			roleInfo.role = 0
		} else {
			roleInfo.role = 1
		}
		getUserInfo()
		switchShow.value = false
	}
</script>
<style lang="scss" scoped>
	.page {
		background: #F7F8FC;
	}

	.header_box {
		height: 500rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 0 0 54rpx 54rpx;
		overflow: hidden;

		.header_user {
			padding: 0 20rpx;

			.header_user_left {
				.header_user_left_type {
					width: 110rpx;
					height: 40rpx;
					background: #000000;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.header_user_right {
				width: 159rpx;
				height: 49rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.header_cs {
			width: 681rpx;
			height: 190rpx;
			margin: 0 auto;
			background: #ffffff;
		}

	}

	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_list {
				.main_item {
					padding: 22rpx 22rpx !important;
					background: #FFFFFF !important;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29) !important;
					border-radius: 5rpx !important;
				}

				::v-deep.u-button {
					width: 710rpx !important;
					height: 86rpx !important;
					border: 0 !important;
					padding: 0 22rpx !important;
					background: #FFFFFF !important;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29) !important;
					border-radius: 5rpx !important;
				}
			}
		}

	}
</style>